<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="/layout/layout.xhtml">

	<ui:define name="content">
		<h:form id="form">
			
			<p:dashboard id="board" model="#{adminDashboardControler.categoryModel}">  
		  
		        <p:panel id="listeCategories" header="Liste des categories" style="margin:10px;">  
					
					<p:contextMenu for="categories">  
				        <p:menuitem value="Supprimer" update="categories" icon="ui-icon-close" onclick="confirmationDelete.show()"/>  
				    </p:contextMenu>
				    
					<p:dataTable id="categories" value="#{listeCategorieControler.categories}" 
						var="categorie" selectionMode="single" rowKey="#{categorie.id}" 
						selection="#{listeCategorieControler.selectedCategorie}" 
						paginator="true" rows="10">
						
						<p:column headerText="Nom">
							<h:outputText value="#{categorie.nom}" />  
						</p:column>
						
					</p:dataTable>
					
					 <p:confirmDialog id="confirmDeleteDialog" appendToBody="true" message="Voulez vous vraiment supprimer cette categorie ?" header="Suppression categorie" severity="alert" widgetVar="confirmationDelete">  
				        <p:commandButton id="confirmDelete" value="Oui" oncomplete="confirmDeleteDialog.hide()" action="#{listeCategorieControler.supprimerCategorie}" />  
				        <p:commandButton id="declineDelete" value="Non" onclick="confirmDeleteDialog.hide()" type="button" />   
				    </p:confirmDialog>
		        </p:panel> 

				<p:panel  id="nouvelleCategorie" header="Nouvelle categorie" style="margin:10px;width:300px">
					<h:panelGrid columns="2" cellpadding="1" columnClasses="label, input">
		
						<h:outputLabel for="nom" value="Nom" />
						<h:inputText id="nom" label="Nom"
							value="#{nouvelleCategorieControler.categorie.nom}">
						</h:inputText>
						<p:message for="nom" />
		
					</h:panelGrid>
					<p:panel style="text-align: center">
						<p:commandButton onclick="confirmation.show()" value="Valider" type="button" />
						<p:commandButton action="#{nouvelleCategorieControler.annuler}" value="Annuler" update=":form:listeCategories" immediate="true" />
					</p:panel>
					<p:confirmDialog id="confirmDialog" appendToBody="true" message="Voulez vous ajouter cette categorie ?" header="Ajout categorie" severity="info" widgetVar="confirmation">  
				        <p:commandButton id="confirm" value="Oui" oncomplete="confirmation.hide()" action="#{nouvelleCategorieControler.ajouterCategorie}"/>  
				        <p:commandButton id="decline" value="Non" onclick="confirmation.hide()" type="button" />   
				    </p:confirmDialog>
				</p:panel>
		    </p:dashboard>
		</h:form>
	</ui:define>
</ui:composition>
